<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		  <script src="../../js/vue.min.js"></script>
	</head>
	<body>
		<!--
		VueJS 常用系统指令  
		1.3@mouseover
		说明:鼠标移入区域事件(等同于v-on:mouseover)
		
		【需求1】：给指定区域大小的div中添加样式，鼠标移到div中，弹出窗口。
		
		【需求2】：在div中添加<textarea>，鼠标移动到<textarea>，再弹出一个窗口
		-->
		<style>
		        .box {
		            width: 300px;
		            height: 400px;
		            border: 1px solid red;
		        }
		        .textarea{
		            width: 200px;
		            height: 100px;
		            border: 1px solid blue;
		        }
		    </style>
		</head>
		<body>
		<div id="app">
		    <div class="box" @mouseover="fun01">
		        div
		        <textarea class="textarea" @mouseover="fun02($event)">
		            textarea
		        </textarea>
		    </div>
		</div>
		​
		<script>
		    //创建一个Vue实例
		    new Vue({
		        el: '#app',
		        data: {},
		        methods: {
		           fun01:function () {
		               alert("div");
		           },
		            fun02:function (e) {
		                alert("textarea");
						//因为移到textarea中也触发了div的事件
						//意思显示textarea 就不显示div的事件
		                e.stopPropagation(); //停止冒泡
		            }
		        }
		    });
		</script>
	</body>
</html>
